/* eslint-disable react/no-deprecated */
"use client";

import React from "react";
import "../../app/style/loading.css";
import ReactDOM from 'react-dom'


let domNode:any
if(typeof window !== 'undefined'){
  domNode = document.createElement("div");
}


const Loader = () => {
  return (
    <div className="fullScreen">
      <div id="wifi-loader">
        <svg viewBox="0 0 86 86" className="circle-outer">
          <circle r="40" cy="43" cx="43" className="back"></circle>
          <circle r="40" cy="43" cx="43" className="front"></circle>
          <circle r="40" cy="43" cx="43" className="new"></circle>
        </svg>
        <svg viewBox="0 0 60 60" className="circle-middle">
          <circle r="27" cy="30" cx="30" className="back"></circle>
          <circle r="27" cy="30" cx="30" className="front"></circle>
        </svg>

        <div data-text="Loading..." className="text"></div>
      </div>
    </div>
  );
};

const open = () => {
  document.body.appendChild(domNode)
  ReactDOM.render(<Loader></Loader>,domNode)
};

const close = () => {
  domNode.remove()
};

export { open, close };
